<template>
  <div class="app-container">
    <!-- 顶部筛选栏 -->
    <div class="filter-card">
      <select v-model="selectedRegion">
        <option value="">全部地区</option>
        <option v-for="region in regions" :key="region.name" :value="region.name">
          {{ region.name }}
        </option>
      </select>

      <select v-model="selectedProvince">
        <option value="">全部省份</option>
        <option v-for="province in provinces" :key="province.code" :value="province.name">
          {{ province.name }}
        </option>
      </select>

      <select v-model="selectedSchool">
        <option value="">全部学校</option>
        <option v-for="school in schools" :key="school.name" :value="school.name">
          {{ school.name }}
        </option>
      </select>

      <select v-model="selectedGrade">
        <option value="">全部年级</option>
        <option v-for="grade in grades" :key="grade.name" :value="grade.name">
          {{ grade.name }}
        </option>
      </select>

      <button class="filter-btn" @click="resetFilters">重新筛选</button>
    </div>

    <!-- 三个分布统计 -->
    <div class="stats-grid">
      <!-- 地区分布 -->
      <div class="stats-card">
        <h3 class="card-title">📍 地区分布</h3>
        <div
            class="list-item"
            v-for="region in filteredRegions"
            :key="region.name"
        >
          <span>{{ region.name }}</span>
          <span class="tag">{{ region.count }}人</span>
        </div>
      </div>

      <!-- 学校分布 -->
      <div class="stats-card">
        <h3 class="card-title">🏫 学校分布</h3>
        <div
            class="list-item"
            v-for="school in filteredSchools"
            :key="school.name"
        >
          <span>{{ school.name }}</span>
          <span class="tag">{{ school.count }}人</span>
        </div>
      </div>

      <!-- 年级分布 -->
      <div class="stats-card">
        <h3 class="card-title">👨‍🎓 年级分布</h3>
        <div
            class="list-item-column"
            v-for="grade in filteredGrades"
            :key="grade.name"
        >
          <div class="list-row">
            <span>{{ grade.name }}</span>
            <span class="tag">{{ grade.count }}人</span>
          </div>
          <div class="progress-bar">
            <div
                class="progress"
                :style="{ width: grade.count + '%' }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部汇总统计 -->
    <div class="bottom-stats">
      <div class="bottom-item">
        <h2 class="green">{{ filteredRegions.length }}</h2>
        <p>覆盖地区</p>
      </div>
      <div class="bottom-item">
        <h2 class="purple">{{ filteredSchools.length }}</h2>
        <p>合作学校</p>
      </div>
      <div class="bottom-item">
        <h2 class="orange">{{ totalGradeCount }}</h2>
        <p>年级人数</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 输入绑定
const search = ref("");
const selectedRegion = ref("");
const selectedProvince = ref("");
const selectedSchool = ref("");
const selectedGrade = ref("");

// 你原来的完整 provinces
const provinces = ref([
  { code: "bj", name: "北京市" },
  { code: "sh", name: "上海市" },
  { code: "tj", name: "天津市" },
  { code: "cq", name: "重庆市" },
  { code: "hebei", name: "河北省" },
  { code: "shanxi", name: "山西省" },
  { code: "liaoning", name: "辽宁省" },
  { code: "jilin", name: "吉林省" },
  { code: "heilongjiang", name: "黑龙江省" },
  { code: "jiangsu", name: "江苏省" },
  { code: "zhejiang", name: "浙江省" },
  { code: "anhui", name: "安徽省" },
  { code: "fujian", name: "福建省" },
  { code: "jiangxi", name: "江西省" },
  { code: "shandong", name: "山东省" },
  { code: "henan", name: "河南省" },
  { code: "hubei", name: "湖北省" },
  { code: "hunan", name: "湖南省" },
  { code: "guangdong", name: "广东省" },
  { code: "guangxi", name: "广西壮族自治区" },
  { code: "hainan", name: "海南省" },
  { code: "sichuan", name: "四川省" },
  { code: "guizhou", name: "贵州省" },
  { code: "yunnan", name: "云南省" },
  { code: "xizang", name: "西藏自治区" },
  { code: "shanxi2", name: "陕西省" },
  { code: "gansu", name: "甘肃省" },
  { code: "qinghai", name: "青海省" },
  { code: "ningxia", name: "宁夏回族自治区" },
  { code: "xinjiang", name: "新疆维吾尔自治区" },
  { code: "neimenggu", name: "内蒙古自治区" },
  { code: "hongkong", name: "香港特别行政区" },
  { code: "macau", name: "澳门特别行政区" },
  { code: "taiwan", name: "台湾省" }
]);

// 你原来的 schools
const schools = ref([
  { name: "上海交通大学", count: 2 },
  { name: "浙江大学", count: 33 },
  { name: "台州学院", count: 58 }
]);

const grades = ref([
  { name: "大一", count: 20 },
  { name: "大二", count: 13 },
  { name: "大三", count: 56 },
  { name: "大四", count: 12 },
  { name: "大五", count: 8 },
  { name: "研一", count: 11 },
  { name: "研二", count: 2 },
  { name: "研三", count: 1 }
]);

// 你原来的 regions
const regions = ref([
  { name: "华东地区", count: 3 },
  { name: "华北地区", count: 2 },
  { name: "华南地区", count: 5 },
  { name: "东北地区", count: 4 },
  { name: "西南地区", count: 3 },
  { name: "港澳台地区", count: 1 }
]);

// -------- 筛选逻辑 --------
const filteredSchools = computed(() => {
  return schools.value.filter(s => {
    return (
        (!selectedSchool.value || s.name === selectedSchool.value) &&
        (!search.value || s.name.includes(search.value))
    );
  });
});
const filteredGrades = computed(() => {
  return grades.value.filter(g => {
    return (
        (!selectedGrade.value || g.name === selectedGrade.value) &&
        (!search.value || g.name.includes(search.value))
    );
  });
});

// 计算筛选后年级的总人数
const totalGradeCount = computed(() => {
  return filteredGrades.value.reduce((total, grade) => {
    return total + grade.count;
  }, 0);
});

const filteredRegions = computed(() => {
  return regions.value.filter(r => {
    return !selectedRegion.value || r.name === selectedRegion.value;
  });
});

const resetFilters = () => {
  search.value = "";
  selectedRegion.value = "";
  selectedProvince.value = "";
  selectedSchool.value = "";
  selectedGrade.value = "";
};
</script>


<style scoped>
.app-container {
  padding: 24px;
  background: #f9fafb;
  min-height: 100vh;
  font-family: "Microsoft YaHei", sans-serif;
}

/* 筛选栏 */
.filter-card {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.filter-card input,
.filter-card select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

/* 三个分布卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.stats-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.list-item-column {
  margin-bottom: 10px;
}
.list-row {
  display: flex;
  justify-content: space-between;
}
.tag {
  background: #f3f4f6;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.progress {
  height: 100%;
  background: #2563eb;
}

/* 底部汇总 */
.bottom-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.bottom-item {
  background: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.bottom-item h2 {
  margin: 0;
  font-size: 22px;
}
.bottom-item p {
  margin: 6px 0 0;
  color: #666;
}
.green {
  color: #16a34a;
}
.purple {
  color: #7c3aed;
}
.orange {
  color: #f97316;
}
</style>
